// begin
$headFont:1.3rem
$colorGray:#cccccc
$border:1px solid #e5e5e5
$color:#00cc9a

@mixin sbFlex
    display: flex
    justify-content: space-between

/*reset*/
* 
    margin: 0 
    padding: 0
body 
    font-family: Microsoft Yahei,'roboto', helvetica, arial, sans-serif
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td 
    margin: 0
    padding: 0
table 
    border-collapse: collapse
img 
    vertical-align: middle
    border: 0
h1, h2, h3, h4, h5, h6 
    font-weight: normal
ul, ol, li 
    list-style: none
em, i 
    font-style: normal
img 
    border: none
input, img 
    vertical-align: middle
input,textarea 
    -webkit-tap-highlight-color: rgba(0,0,0,0)
    -webkit-appearance: none
    border: 0
    border-radius: 0
textarea:focus 
    utline: 0
a 
    color: #6E7D8B
    text-decoration: none
    outline: 0
a:active, a:hover, a.current 
    outline: 0
html 
    font-size: 312.5%
img 
    border: none
    display: block
input 
    border: none
    font-size: .28rem
input:focus 
    outline: none
.clearfix:after
    content: ""
    display: block
    height: 0
    clear: both
    visibility: hidden
.red
    color: red
/*regsiter*/
@media only screen and (max-width: 960px), only screen and (max-device-width:960px) 
    html,body
        font-size: 30px!important
@media only screen and (max-width: 800px), only screen and (max-device-width:800px) 
    html,body 
        font-size: 25px!important
@media only screen and (max-width: 720px), only screen and (max-device-width:720px) 
    html,body 
        font-size: 22.5px!important
@media only screen and (max-width: 640px), only screen and (max-device-width:640px) 
    html,body 
        font-size: 20px!important
@media only screen and (max-width: 600px), only screen and (max-device-width:600px) 
    html,body 
        font-size: 18.75px!important
@media only screen and (max-width: 540px), only screen and (max-device-width:540px) 
    html,body 
        font-size: 16.875px!important
@media only screen and (max-width: 480px), only screen and (max-device-width:480px) 
    html,body 
        font-size: 15px!important
@media only screen and (max-width: 414px), only screen and (max-device-widt:414px) 
    html,body 
        font-size: 12.9375px!important
@media only screen and (max-width: 400px), only screen and (max-device-width:400px) 
    html,body 
        font-size: 12.5px!important
@media only screen and (max-width: 375px), only screen and (max-device-width:375px) 
    html,body
        font-size: 11.71875px!important
@media only screen and (max-width: 360px), only screen and (max-device-width:360px) 
    html,body 
        font-size: 11.25px!important
@media only screen and (max-width: 320px), only screen and (max-device-width:320px) 
    html,body 
        font-size: 10px!important
@media only screen and (max-width: 240px), only screen and (max-device-width:240px) 
    html,body 
        font-size: 7.5px!important
.header
    background: #ffffff
    .weui-cells
        margin-top: 0
    .weui-cells:before,.weui-cells:after,.weui-cell:before
        border: none
    .weui-cell__bd 
        display: flex
        span
            width: 1.6rem
            display: inline-block
        img
            width: 100%
        p
            font-size: $headFont
            margin-left: 0.3rem
        dl
            width: 100%
            margin-right: 30px
            text-align: right
            font-size: 1.3rem
            color: #999999
        .weui-select
            font-size: 1.4rem
    .weui-label 
        display: flex
        span
            width: 2rem
            display: inline-block
            margin-top: 0.8rem
        img
            width: 100%
        p
            font-size: $headFont
            line-height: 3rem
            margin-left: 0.3rem
.shop-tit
    padding-top: 3rem
    background: #f6f6f6
    border-top: 1px solid #f0eeee
    color: $color
    dl
        background: #ffffff
        border-top: 1px solid #f0eeee
        padding: 0 15px
        @include sbFlex
        dt
            display: flex
            line-height: 3.5rem
            font-size: 1.2rem
            span
                width: 1.3rem
                margin-top: 0.6rem
                img
                    width: 100%
            h3
                margin-left: 1rem
        dd
            font-size: 1.2rem
            width: 8rem
            border-left: 1px solid #f0eeee
            line-height: 3.5rem
            text-align: center
.wrapper
    height: 35rem
    overflow: hidden
.shop-list
    position: relative
    z-index: 0
    background: #ffffff
    li
        border-top: 1px solid #f0eeee
        display: flex
        padding: 1rem 3%
.shop-list-img
    width: 30%
    padding-bottom: 30%
    overflow: hidden
    font-size: 0
    height: 0
    background-size: cover !important
.shop-list-content
    margin-left: 5%
    width: 60%
    h4
        font-size: 1.6rem
        font-weight: bold
        overflow: hidden
        white-space: nowrap
        text-overflow: ellipsis
        width: 8.2em
        height: 3rem
        line-height: 3rem
        padding-top: 0.2rem
    p
        color: #cccccc
        line-height: 2rem
        font-size: 1.3rem
    dl
        @include sbFlex
        dt
            color: #0acd9b
            font-size: 2.6rem
            display: block
            height: 2.3rem
        dd
            display: flex
            margin-top: 1rem
            i
                cursor: pointer
                width: 2.3rem
                padding-bottom: 2.3rem
                display: block
                background-size: cover
                height: 0
            span
                margin: 0 0.5rem
                font-size: 2rem
                display: block
                height: 2.3rem
                line-height: 2.3rem
                width: 2rem
                text-align: center
.shop-minus
    background: url(../img/minus.png) no-repeat center
.shop-add
    background: url(../img/add.png) no-repeat center
.footer
    position: fixed
    bottom: 0
    left: 0
    width: 100%
    display: flex
    z-index: 999
    dl
        display: flex
        flex-direction: column
        text-align: center
        width: 25%
        background: #ff9338
        height: 4rem
        padding: 0.3rem
        box-sizing: border-box
        position: relative
        i
            position: absolute
            top: 0.6rem
            right: 0.6rem
            width: 1.6rem
            height: 1.6rem
            background: #ffffff
            border-radius: 50%
            color: #ff9338
        dt
            width: 1.3rem
            margin: 0 auto
            img
                width: 100%
        dd
            color: #ffffff
            font-size: 1.25rem
    div
        text-align: center
        width: 75%
        color: #ffffff
        background: $color
        height: 4rem
        line-height: 4rem
        font-size: 2rem
.this-discount
    @include sbFlex
    position: fixed
    bottom: 4rem
    left: 0
    padding: 0rem 4%
    border-top: 1px solid #f0eeee
    box-sizing: border-box
    height: 3.5rem
    line-height: 3.5rem
    width: 100%
    background: #ffffff
    dt
        display: flex
        color: #ccc
        font-size: 1.45rem
        span
            width: 1.5rem
            margin-top: 1rem
            margin-right: 0.5rem
        img
            width: 100%
    dd
        color: $color
        font-size: 1.2rem
.details
    position: fixed
    left: 0
    bottom: 4rem
    width: 100%
    background: #ffffff
    z-index: 999
    overflow: hidden
    h4
        border-bottom: 1px solid #f0eeee
        margin: 0 3%
        height: 3rem
        line-height: 3rem
        font-size: 1.5rem
        padding-left: 1rem
    ul
        padding: 0 5%
        box-sizing: border-box
        padding-top: 0.3rem
        li
            @include sbFlex
            font-size: 1.2rem
            line-height: 3rem
            width: 100%
            span
                display: flex
                span
                    margin-left: 1rem
                    color: $color
            h5
                color: #ccc
                font-size: 1.2rem
            p
                color: #ff9338
            dl
                display: flex
                padding-top: 0.5rem
                box-sizing: border-box
                height: 3rem
                line-height: 3rem
                dt
                    color: #999999
                    margin-right: 1rem
                    line-height: 2rem
                i
                    cursor: pointer
                    width: 2rem
                    padding-bottom: 2rem
                    display: block
                    background-size: cover
                    height: 0
                span
                    margin: 0 0.5rem
                    font-size: 1.6rem
                    display: block
                    height: 2rem
                    line-height: 2rem
                    width: 2rem
                    text-align: center
.details-tit
    line-height: 3.5rem
    height: 3.5rem
    position: relative
    border-bottom: 1px solid #f0eeee
    box-sizing: border-box
    h3
        text-align: center
        font-size: 1.8rem
        color: #666666
    >span
        position: absolute
        width: 1.8rem
        display: block
        right: 3%
        bottom: 0.7rem
        img
            width: 100%
.isshade
    background: rgba(0,0,0,0.7)
    position: fixed
    height: 100%
    width: 100%
    left: 0
    top: 0
    z-index: 666
.ball
    width: 1.6rem
    height: 1.6rem
    margin-left: 17.9%
    z-index: 9999
    border-radius: 50%
    margin-bottom: 1.8rem
    position: fixed
    left: 0
    bottom: 0
    transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
.inner
    width: 1.6rem
    height: 1.6rem
    border-radius: 50%
    background: $color
    transition: all 0.4s linear
// .parabola-leave-active
//     transition: 1s
//     transform:translate3d(200px,0px,0px)
// .parabola-time
//     position: fixed
//     left: 0
//     bottom: 0
//     z-index: 999
// .parabola-transtion
//     transition: all 0.4s
// .details-enter-active, .details-leave-active 
//     transition: opacity .5s
// .details-enter, .details-leave-to 
//     opacity: 0
.payment-detail
    position: fixed
    left: 0
    bottom: 0
    background: #ffffff
    width: 100%
    z-index: 999
    height: 25rem
    overflow: hidden
.payment-detail-tit
    h3
        color: #000000
        font-weight: bold
        font-size: 1.5rem
.payment-detail-list
    font-size: 1.2rem
    dl,p
        @include sbFlex
        margin: 0 1rem
        padding: 0 0.5rem
    dl
        line-height: 3.5rem
        border-bottom: $border
    p
        line-height: 2rem
        padding-bottom: 0.2rem
    p:nth-child(3),p:nth-child(4)
        span:last-child
            color: red
    p:nth-child(5)
        span:last-child
            color: $color
.payment-detail-btn
    position: fixed
    left: 6%
    bottom: 1rem
    background: $color
    color: #ffffff
    width: 88%
    line-height: 3.3rem
    text-align: center
    border-radius: 0.5rem
    span
        font-size: 1.6rem
.select-payment
    background: #ffffff
    position: fixed
    left: 0
    bottom: 0
    width: 100%
    z-index: 999
    height: 25rem
.select-detail-tit
    >span
        right: auto
        left: 3%
        bottom: 0
        i
            font-size: 2rem
            color: #666666
.select-disabled
    background: $colorGray
.select-list
    display: flex
    flex-direction: column
    li
        padding: 0.8rem 4%
        box-sizing: border-box
        height: 5rem
        border-bottom: $border
        @include sbFlex
        img
            width: 100%
        >div
            font-size: 1.4rem
            display: flex
            >span
                width: 3rem
                display: block
            span
                margin-right: 1rem
            dl
                font-size: 1.3rem
                dt,dd
                    line-height: 1.6rem
                dd
                    span
                        color: $color
                        margin-left: 0.5rem
        p
            width: 3rem
            display: block
            img
                margin-top: 0.6rem
    li+li
        span
            img
            margin-top: 0.5rem
.select-scroll
    height: 21.5rem
    overflow: hidden
.oil-card-bg
    background: #cccccc
    color: #999999
.favourable
    position: fixed
    left: 0
    bottom: 0
    background: #ffffff
    z-index: 999
    width: 100%
    height: 24rem
.favourable-tit
    background: #f7f7f8
    line-height: 4rem
    height: 4rem
    border-top: $border
    h3
        font-size: 1.5rem
        color: #3d4145
    span
        width: 2.1em
        line-height: 4rem
        color: #04BE02
        bottom: 0
        font-size: 1.8rem
.favourable-list
    height: 20rem
    overflow: hidden
    ul
        padding-top: 0.3rem
        box-sizing: border-box
        padding-bottom: 2rem
        li
            padding-left: 1.2rem
            font-size: 1.4rem
            padding-top: 0.8rem
            color: #999999
.googs
    position: fixed
    left: 0
    bottom: 4rem
    width: 100%
    background: #ffffff
    height: 35rem
    z-index: 999
    overflow: hidden
.goods-list
    @include sbFlex
.goods-scroll
    height: 31.5rem
    overflow: hidden
    width: 74%
    position: relative
.goods-list-classify
    display: flex
    flex-direction: column
    background: #f3f3f3
    height: 31.5rem
    overflow: hidden
    width: 26%
    ul 
        width: 100%
        li
            line-height: 4.2rem
            width: 100%
            text-align: center
            font-size: 1.25rem
        .active
            background: #ffffff
.goods-list-con
    width: 100%
    height: 31.5rem
    box-sizing: border-box
    ul
        width: 100%
        h3
            color: #525050
            background-color: #f0eeee
            padding-left: 10px
            line-height: 3rem
            margin-bottom: 1.2rem
        li+li
            border-top: 1px solid #d8d8d8
        li
            width: 88%
            margin-left: 6%
            display: flex
            padding-bottom: 0.5rem
            padding-top: 0.5rem
            .shop-list-img
                width: 33%
                padding-bottom: 33%
            .shop-list-content
                margin-left: 4%
                width: 64%
                h4
                    font-size: 1.4rem
                p
                    font-size: 1.2rem
                dl
                    dt
                        font-size: 1.5rem
                    dd
                        margin-top: 0
                        i
                            width: 2rem
                            padding-bottom: 2rem
                        span
                            font-size: 1.8rem
.goods-title
    line-height: 3.1rem
    position: absolute
    left: 0
    top: -1px
    width: 100%
    background: #fff
    z-index: 999
    padding-left: 1rem
.shop-null
    font-size: 1.6rem
    text-align: center
    width: 100%
    margin: 1rem 0
//高度动画
.favourable-leave-active,.favourable-enter-active,
.details-leave-active,.details-enter-active,
.googs-leave-active,.goods-enter-active,
.payment-leave-active,.payment-enter-active,
.select-leave-active,.select-enter-active
    transition: all 0.3s ease
.favourable-leave-active,.favourable-enter,
.details-leave-active,.details-enter,
.goods-leave-active,.goods-enter,
.payment-leave-active,.payment-enter
    height: 0px !important
.favourable-leave,.favourable-enter-active
    height: 24rem
.details-leave,.details-enter-active
    height: 28rem
.goods-leave,.goods-enter-active
    height: 35rem
.payment-leave,.payment-enter-active
    height: 25rem
.select-leave-active,.select-enter
    height: 0!important
    width: 0!important
.select-leave,.select-enter-active
    width: 100%
    height: 25rem